/*
  学习目标：React中JSX- 注意事项
*/

import React from 'react';
import ReactDOM from 'react-dom';

const divNode = (
  // 1. 💥JSX中必须有根标签
  // React.Fragment代表空标签，不会渲染
  // 👍 推荐使用<></> ，等同于<React.Fragment></React.Fragment>
  <>
    <ul>
      <li>12</li>
      <li>34</li>
      <li>45</li>
    </ul>
    <ul>
      <li>12</li>
      <li>34</li>
      <li>45</li>
    </ul>
    {/* 2.💥 必须有闭合标记 */}
    <input type="text" id="box" />
    {/* 3. 💥关键字class for冲突 */}
    {/* class -> className */}
    {/* for -> htmlFor */}

    {/* 多行代码使用（）包住 */}
    {/* JSX需要babel支持，react脚手架内置了babel配置 */}
    <label htmlFor="box">点我激活input</label>
  </>
);

ReactDOM.render(divNode, document.getElementById('root'));
